<template>
  <div :class="['goodsDetail',{scrollForbidden:showModal==true}]">
    <!-- 头部 -->
    <swiper1 :imgList="imgList"></swiper1>
    <div class="name_wrapper" v-if="goodsDetail">
      <div class="name">
        <!-- <span class="name_tag">海外购</span> -->

        <img src="../../../../static/images/goodsDetails/man.png">
        <span class="name_man">{{goodsDetail.max_join_count}}人砍价</span>
        <span style="margin-left:10px" >{{goodsDetail.goods_info.name}}</span>
        <div>
          <button open-type="share">
            <img src="../../../../static/images/goodsDetails/share.png" style="width:40rpx;height:40rpx;">
          </button>
        </div>
      </div>
      <div class="price">
        <span>￥{{goodsDetail.goods_info.s_price}}</span>
        <span>￥{{goodsDetail.goods_info.m_price}}</span>
        <div class="count" v-if="countFlag">
          <div class="count_tit">距活动结束仅剩</div>
          <div class="count_content">
            <span class="data"><span>{{day}}</span> <span>天</span></span>
            <span class="hour"><span>{{hour}}</span> <span>时</span></span>
            <span class="min"><span>{{min}}</span>  <span>分</span></span>
            <span class="second"><span>{{second}}</span> <span>秒</span></span>
          </div>
        </div>
        <div class="count" v-else>活动结束</div>
      </div>
    </div>
    <!-- 头部结束 -->

    <!-- 砍价流程 -->
    <div class="count_tip">
      <div class="count_tip_tit">
        砍价流程
      </div>
        <div class="count_tip_item">
          <div>1</div>
          <div>点击砍价</div>
        </div>
        <div class="count_tip_item">
          <div>2</div>
          <div>找人帮砍</div>
        </div>
        <div class="count_tip_item">
          <div>3</div>
          <div>砍价到底</div>
        </div>
        <div class="count_tip_item">
          <div>4</div>
          <div>优惠购买</div>
        </div>
    </div>
    <!-- 砍价流程结束 -->

    <!-- 规格等详情 -->
    <div class="goods_desc" v-if="goodsDetail">
      <div>
        <div class="goods_desc_item sell_num" >
          <span>销量</span>
          <span>{{goodsDetail.goods_info.sale_count}}</span>
        </div>
        <div class="goods_desc_item serve" >
          <span>邮费</span>
          <span>{{goodsDetail.goods_info.express_fee}}</span>
        </div>

        <div class="goods_desc_item desc" @click="toGoodsIntroduce(0)" >
          <span>详情</span>
          <span>详情介绍</span>
          <span class="list_item_arrow">
            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/right.png" alt="">
          </span>
        </div>
        <div class="goods_desc_item" @click="toGoodsIntroduce(1)" >
          <span>评论</span>
          <span class="list_item_arrow">
            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/right.png" alt="">
          </span>
        </div>
        <!-- 规格等详情结束 -->

        <!-- 评论列 -->
        <div class="comment" >
          <div class="comment_item" v-for="(value,index) in commentList.data" v-show="index<5" :key="index">
            <div class="comment_item_top">
              <div class="comment_item_nick">{{value.user_info.nickname}}</div>
              <div class="comment_item_time">{{value.created_at}}</div>
            </div>
            <div class="comment_item_content">{{value.content}}</div>
            <div class="comment_item_pic">
              <img :src="value1" mode="aspectFill" v-for="(value1,index1) in value.comment_img" @click="previewImage(value1,value.comment_img)" :key="index1">
            </div>
          </div>

          <div class="comment_btn">
            <div class="comment_btn_all" @click="toGoodsIntroduce(1,true)">所有评价({{commentList.total_comment_num}})</div>
            <div class="comment_btn_pic" @click="toGoodsIntroduce(1,false)">有图评价({{commentList.have_img_comment_num}})</div>
          </div>
        </div>
        <!-- 评论列结束 -->
      </div>

       <!-- 商品介绍 -->
        <div class="goods_introduce">
          <div>商品介绍</div>
          <!-- <div>海外品暂不支持7天无理由退换，介意请慎拍，谢谢！</div> -->
          <img :src="value" alt="" v-for="(value,index) in goodsDetail.goods_info.detailed_description" @click="previewImage(value, goodsDetail.goods_info.detailed_description)" :key="index" mode="widthFix">
        </div>
        <!-- 商品介绍结束 -->

        <!-- 底部购物栏 -->
        <div class="cartBar">
          <div class="cartBar_left" >
            <div class="cartBar_left_item" @click="toHome">
              <img src="../../../../static/images/tabBar/home.png" alt="">
              <div>首页</div>
            </div>
            <div class="cartBar_left_item">
              <img src="../../../../static/images/goodsDetails/kefu.png" alt="">
              <div><button open-type="contact">客服</button></div>
            </div>
          </div>
          <div class="cartBar_right" >
            <!-- <div @click="showCart">加入购物车</div> -->
            <div @click="buy" v-if="countFlag">我要砍价</div>
            <div v-else>活动结束</div>
          </div>
        </div>
        <!-- 底部购物栏结束 -->

        <!-- 弹出层 -->
        <div class="mask"  v-if="showModal" @click="hideCart"></div>
        <div class="modalDlg" v-if="showModal">
          <div class="modalDlg_top">
            <img :src="goodsDetail.goods_info.thumb_url" alt="">
            <div class="modalDlg_top_right">
              <div class="modalDlg_top_right_name">
                <!-- <span class="modalDlg_top_right_name_tag">海外购</span> -->
                <span>{{goodsDetail.goods_info.name}}</span>
              </div>
              <div class="cart_price">
                <span>￥{{goodsDetail.goods_info.s_price}}</span>
                <span>库存：{{goodsDetail.goods_info.stock}}</span>
              </div>
            </div>
          </div>
          <div class="modalDlo_center">
            <div class="modalDlo_center_tit" v-if="goodsDetail.goods_info.goods_spu_info.length!=0">规格</div>
            <div class="modalDlo_center_classify">
              <div
                v-for="(item,index) of goodsDetail.goods_info.goods_spu_info"
                 :key="index" @click="select_classify(item,index)"
                 :class="{selectClassify:index==classifyIndex}"
                 >
                 {{item.spu_name}}
                </div>
            </div>
          </div>
          <!-- <div class="modalDlo_bottom">  
           <count @numberChange="numberChange" :stock="goodsDetail.stock"><div>购买数量</div></count>
          </div> -->
          <div class="join_cart"  @click="buying">立即砍价</div>
        </div>
        <!-- 弹出层结束 -->
    </div>
  </div>
</template>

<script>
import swiper1 from '@/components/swiper'
import count from '@/components/count'

export default {
  name:'goodsDetail',
  components:{
    swiper1,
    count
  },
  data(){
    return{
      activeId:'',//活动id
      id:'',//商品id
      goodsDetail:'',//商品信息
      showModal: false,//显示弹出层
      num:1,//购买商品数量
      cartListNum:'',//购物车数量
      commentList:"",   //评论内容
      imgList:'',
      classifyIndex:-1,//规格索引
      classifyId:'',//规格id
      countdown:'',
      day:'',
      hour:'',
      min:'',
      second:'',
      endDate2: '',
      countTimer:'',//定时器
      countFlag:true//显示倒数
    }
  },
  onLoad(options){
    this.activeId=options.activeId;
    this.id=options.id
    this.getGoodsDetails(this.activeId)
    this.getCartList()
    this.getComment()
  },
  watch:{
    goodsDetail(nval){
      if(nval.goods_info.goods_banner.length!=0){
        this.imgList=nval.goods_info.goods_banner
      }else{
        this.imgList=[nval.goods_info.thumb_url]
      }
    }
  },
  methods: {
    previewImage(value,value1){
      this.$currency.previewImage(value,value1)
    },
    buy(){//显示立即购买
      this.num=1;//清除规格数量
      this.showModal=true
    },
    async buying(){   //点击弹窗的立即购买
    //  if(this.classifyId==''){
    //     this.$currency.showToast('先选择规格吧');
    //     return
    //   }
      const userToken=wx.getStorageSync('userToken')
     let res=await this.$request.postData('/activity/initiateBargain',{
       user_token:userToken,
       goods_id:this.id,
       goods_spu_id:this.classifyId,
       activity_bargain_id:this.activeId})
     if(res.data.level=='success'){
       const id=res.data.data.id
        this.$currency.navigateTo(`/pages/discount/discountDetail/main?id=${id}`)
      
     }else{
       this.$currency.showToast(res.data.message)
     }
      
    },
    hideCart() { 
        this.showModal=false
    },
    async getGoodsDetails(id){
      wx.showLoading()
      let res=await this.$request.getData('/activity/getActivityBargainDetail',{activity_bargain_id:id})
      if(res.data.level=='success'){
        this.goodsDetail=res.data.data
        this.endDate2=this.goodsDetail.end_time
        this.countTime(this.endDate2)
      }
      wx.hideLoading()
    },
    numberChange(num){
        this.num=num
    },
    async getCartList(){
      let userToken=wx.getStorageSync('userToken');
      if(userToken){
        let res=await this.$request.getData('/goods/getShopCart',{user_token:userToken});
        if(res.data.level=='success'){
          this.cartListNum=res.data.data.length
        }
      }
      
    },
    async getComment(){
      let res=await this.$request.getData('/goods/getUserComment',{goods_id:this.id,limit:5,page:0})
      this.commentList=res.data
    },
    select_classify(item,index){//选择规格
      this.classifyIndex=index
      this.classifyId=item.id

      this.goodsDetail.goods_info.stock=item.stock;
      this.goodsDetail.goods_info.price=item.price;
      this.$forceUpdate()
    },
    toCart(){
      wx.switchTab({url:'/pages/cart/main'})
    },
    toHome(){
      wx.switchTab({url:'/pages/home/main'})
    },
    toGoodsIntroduce(value,tag){
      wx.navigateTo({url:`/pages/goodsDetailIntroduce/main?index=${value}&&tag=${tag}&&id=${this.id}`})
    },
    countTime(timer) {
      var that = this;
      if(!timer){
        return
      }
    this.countTimer=  setInterval(()=>{
        var date = new Date();
        var now = date.getTime();
        var endDate = new Date(timer);//设置截止时间
        if(isNaN(endDate)){
          // iso不能识别2018-08-30格式时间
          var timer1=timer.replace(/-/g, '/');
          var endDate=new Date(timer1)
        }
        var end = endDate.getTime();
        var leftTime = end - now; //时间差               
        var d, h, m, s, ms;
        if (leftTime >= 0) {
        d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
        h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
        m = Math.floor(leftTime / 1000 / 60 % 60);
        s = Math.floor(leftTime / 1000 % 60);
        // ms = Math.floor(leftTime % 1000);
        // ms = ms < 100 ? "0" + ms : ms
        s = s < 10 ? "0" + s : s
        m = m < 10 ? "0" + m : m
        h = h < 10 ? "0" + h : h

        // this.countdown=d + "：" + h + "：" + m + "：" + s + ":" + ms;
        // console.log(this.countdown)
        this.day=d;
        this.hour=h;
        this.min=m;
        this.second=s
        //递归每秒调用countTime方法，显示动态时间效果
        } else {
        this.countFlag=false
        }
      },1000)
    },
  },
    onShareAppMessage(){
    return {
    title: '洽商会商城',
      desc:'洽商会商城',
  }
  },
  onShow(){
    this.num=1;//清空选择商品的数量
    this.showModal=false//显示弹出层
    this.classifyIndex=-1,//规格索引
    this.classifyId=''//规格id
    this.countFlag=true
    this.$store.dispatch('setCoupon','')//用来清空优惠券，只能这里清空
  },
  onUnload(){
    clearInterval(this.countTimer)
  },
  // onHide(){
  //   clearInterval(this.countTimer)
  // }
  
}
</script>

<style scoped>

.scrollForbidden{
  overflow: hidden;/*有弹出层时禁止下层滑动*/
}
/* 头部 */
.goodsDetail{
  width:100%;
  min-height: 100%;
  background:#eee;
}
  .name_wrapper{
    padding:10px;
    background: #fff;
  }
  .name_tag{
    border:1px solid purple;
    color:purple;
    border-radius: 5px;
    padding:2.5px;
    font-size:12px;
    margin-right: 5px;
  }
  .name{
    display: flex;
    text-align: center;
    align-items: center;
  }
  .name img{
    width:30px;
    height: 30px;
  }
  .name_man{
    color:#fff;
    background: #eb544d;
  }
  
  .price{
    background: #eb544d;
    padding:20px 0;
    margin-top:20px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .price>span:nth-child(1){
    color: #fff;
    font-size: 25px;
    margin-right:-10px;
  }
  .price>span:nth-child(2){
    text-decoration: line-through;
  }
  .price .count{
    color:#fff;
  }
  .count_tit{
    margin-bottom: 10px;
  }
  .data>span:first-child,.hour>span:first-child,.second>span:first-child,.min>span:first-child{
    background: #fff;
    margin:0 2.5px;
    color:#eb544d
  }

  /* 砍价流程 */

  .count_tip{
    border-top:1px solid #eee;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;
    background: #fff;
    margin-bottom: 10px;
  }

  .count_tip_tit{
    width: 100%;
    text-indent:20px;
    border-bottom: 1px solid #eee;
    height: 40px;
    line-height: 40px;
  }

  .count_tip_item{
    text-align: center;
    padding:10px 0;
  }
  .count_tip_item div:first-child{
    display: inline-block;
    color:#eb544d;
    width: 20px;
    height: 20px;
    border:1px solid #eb544d;
    padding:5px;
    border-radius: 50%;
    margin-bottom: 5px;
  }
  /* 中间详情 */
  .goods_desc{
    width:100%;
    margin-top:15px;
  }
  .goods_desc_item{
    background: #fff;
    display: flex;
    height:40px;
    align-items: center;
    margin-bottom:5px;
  }
  .goods_desc_item span:nth-child(1){
    color:rgb(63, 60, 60);
    font-size: 12px;
    margin-left:10px;
    margin-right:20px;
  }
  
  .goods_desc_item img{
    width:20px;
    height:20px;
  }
  .list_item_arrow{
    flex:1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

/* 评论列 */
  .comment{
    width:100%;
    background:#fff;
  }
  .comment_item{
    padding:5px 10px;
    border-bottom: 1px solid #eee;
    color:rgb(63, 60, 60);
    font-size:14px;
  }
  .comment_item_top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .comment_item_nick{
    color:cornflowerblue;
  }
  .comment_btn{
    margin-top:10px;
    padding:10px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .comment_btn_all,.comment_btn_pic{
    width:40%;
    height:30px;
    line-height: 30px;
    padding:2.5px 5px;
    text-align: center;
    border-radius: 5px;
    border:1px solid gray;
  }

  /* 商品介绍 */
  .goods_introduce{
    background: #fff;
    width:100%;
    margin-top:10px;
    padding-bottom:50px;
  }
  .goods_introduce>div:nth-child(1){
    margin-top:5px;
    margin-left: 10px;
  }
  .goods_introduce>div:nth-child(2){
    margin-top:5px;
    margin-left: 10px;
    color:red;
    margin-bottom:20px;
  }
  .goods_introduce>img{
    width:100%;
    height: auto;
  }


  /* 底部购物栏 */
  .cartBar{
    width:100%;
    height:45px;
    display: flex;
    position: fixed;
    bottom:0;
    background:#fff;
  }
  .cartBar_left,.cartBar_right{
    flex:1;
    display: flex;
  }
  .cartBar_left_item{
    display:flex;
    flex:1;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
  }
  .cartBar_left_item>img{
    width:20px;
    height: 20px;
  }
  .cartBar_right{
    display:flex;
    line-height: 45px;
    text-align: center;
    color:#fff;
  }
  .cartBar_right>div{
    flex:1;
  }
  .cartBar_right>div:nth-child(1){
    background:#eb544d;
  }
  .cartBar_right>div:nth-child(2){
    background:red;
  }
  .cartIcon_wrapper{
    position: relative;
  }
  .cartIcon{
    position: absolute;
    background:red;
    right:20px;
    width:20px;
    height: 20px;
    line-height: 20px;
    color:#fff;
    text-align: center;
    border-radius: 50%;
    top:-5px;
  }



  /* 弹出框 */
  .mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    z-index: 9000;
    opacity: 0.7;
}
 
.modalDlg{
    width: 100%;
    height:45%;
    position: fixed;
    bottom:0;
    left: 0;
    z-index: 9999;
    background-color: #fff;
}

.modalDlg_top{
  padding:5px;
  padding-right:25px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  
}
.modalDlg_top>img{
  width:80px;
  height: 80px;
}
.modalDlg_top_right{
  margin-left:20px;
  width:200px;
}
.modalDlg_top_right_name{
  display: flex;
  align-items: center
}
.modalDlg_top_right_name_tag{
  color:purple;
  display: inline-block;
  width:50px;
  text-align: center;
  border:1px solid purple;
  font-size: 10px;
  border-radius: 5px;
  margin-right:5px;
}
.modalDlg_top_right_name_tag+span{
  width:200px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
} 
.modalDlo_bottom{
  margin-left:5px;
}
.cart_price{
  margin-top:15px;
  display: flex;
  justify-content: space-between;
  align-items: center
}
.cart_price>span:nth-child(1){
  color:red;
}

.modalDlo_center,.modalDlo_center_tit,.modalDlo_center_classify{
  width:100%;
}
.modalDlo_center_classify{
  display:flex;
  align-items: center;
  flex-wrap:wrap;
  margin:10px 0;
  padding-bottom: 20px;
}
.modalDlo_center_classify>div{
  border:1px solid #eee;
  padding:2.5px 5px;
  border-radius: 5px;
  margin-left:5px;
  text-align: center;
}
.modalDlo_center_tit{
  padding-left:10px;
}
.join_cart{
  width:100%;
  background: rgb(196, 75, 75);
  color:#fff;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  position: absolute;
  bottom:0;
}
button::after {
  border: none;
}
button {
  background-color: #fff;
  line-height: 16px;
  font-size: 10px;
  border-radius:0;
}
.comment_item_pic{
    display:flex;
  }
  .comment_item_pic>img{
    width:80px;
    height: 80px;
    margin-right: 10px;
  }

  /* 规格 */
  .selectClassify{
    border:red 1px solid !important;
    color:red;
  }
</style>
